{extend name="public/common"}

{block name="style"}
<title>个人中心</title>
<style>
    body{
        background-color: #F0F0F0;
    }
    .mint-tab-item-label { font-size: 1.4rem;  }
    .mint-navbar .mint-tab-item.is-selected {color: #69B9F9;opacity: .9;margin-bottom: 0}
    /*.mint-tab-item:active {*/
        /*background: red;*/
    /*}*/
    .tab-item-sort>.tab-item-time {padding: 0 4vw;height:7.2vw;line-height: 7.2vw;color: #929292;font-size: 1.2rem;}
    .tab-sort-num {background: #fff;width:96vw;padding: 4.53vw 0 4.53vw 4vw;margin-bottom: 2.67vw;}
    .tab-sort-Img {width:21.33vw;height:21.33vw;float:left;}
    .tab-sort-detail {margin-left: 24.53vw;height:21.4vw;position: relative;padding-right: 4vw;}
    .tab-sort-title {
        color: #333;
        font-size: 1.6rem;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        min-height: 11.733vw;
    }
    .tab-sort-time {font-size: 1.2rem;color: #999;}
    .tab-sort-day {margin-top: 1.5vw;}
    .tab-sort-day span {padding: 1px;}
    .tab-sort-day span:first-child {
        border-top: 1px solid #69B9F9;
        border-left: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        background: #69B9F9;
        color: #fff;
        border-top-left-radius: 1vw;
        border-bottom-left-radius: 1vw;
    }
    .tab-sort-day span:last-child {
        border-top: 1px solid #69B9F9;
        border-right: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        color: #69B9F9;
        border-top-right-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
    .tab-sort-money {
        position: absolute;
        bottom:0;
        right:4vw;
        font-size: 1.6rem;
        color: #52CC92;
    }
    .tab-sort-bottom {
        margin-left: 24.53vw;
        border-top: 1px solid #E8E8E8;
        margin-top: 2.14vw;
        padding-top: 2.14vw;
    }
    .tab-sort-bottom .active {font-size: 1.1rem;color: #333;}
    .tab-sort-bottom .active span {
        padding: 1vw;
        background: #FCC44B;
        border-radius: 2px;
        color: #fff;
    }
    .tab-sort-bottom .cancel {font-size: 1.1rem;color: #999;}
    .tab-sort-bottom .cancel span {
        padding: 1vw;
        background: #E5E5E5;
        border-radius: 2px;
        color: #fff;
    }
</style>
{/block}

{block name="body"}
<!-- -1 删除   0.禁用   1 预报名中 2启动.-->
<div id="app">
    <mt-navbar v-model="selected">
        <mt-tab-item id="1">全部</mt-tab-item>
        <mt-tab-item id="2">已报名</mt-tab-item>
        <mt-tab-item id="3">已取消</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
            <div class="tab-item-sort" v-for="item in 1">
                <div class="tab-item-time">2018-01-02 星期六</div>
                <div class="tab-sort-num" v-for="n in 2" @click="jumpToDel()">
                    <img src="/index/images/cbd.jpg" alt="" class="tab-sort-Img">
                    <div class="tab-sort-detail">
                        <div class="tab-sort-title">第六届哈尔滨TAISHO雪地自行车赛活动</div>
                        <div class="tab-sort-time">赛事时间：2018.02.24-2018</div>
                        <div class="tab-sort-day"><span>热门活动 </span><span>距活动开始还有3天</span></div>
                        <div class="tab-sort-money">¥88元</div>
                    </div>
                </div>
            </div>
            <div class="tab-item-sort" v-for="item in 1">
                <div class="tab-item-time">2018-01-02 星期六</div>
                <div class="tab-sort-num" v-for="n in 2">
                    <img src="/index/images/cbd.jpg" alt="" class="tab-sort-Img">
                    <div class="tab-sort-detail">
                        <div class="tab-sort-title">第六届哈尔滨TAISHO雪地活动第六届哈尔滨TAISHO雪地活动</div>
                        <div class="tab-sort-time">赛事时间：2018.02.24-2018</div>
                        <div class="tab-sort-day"><span>热门活动 </span><span>距活动开始还有3天</span></div>
                        <div class="tab-sort-money">¥88元</div>
                    </div>
                    <div class="tab-sort-bottom">
                        <div class="active"><span>报</span> 已报名参加该活动</div>
                        <!--<div class="cancel"><span>消</span> 已取消参加该活动</div>-->
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <div class="tab-item-sort" v-for="item in 1">
                <div class="tab-item-time">2018-01-02 星期六</div>
                <div class="tab-sort-num" v-for="n in 5">
                    <img src="/index/images/cbd.jpg" alt="" class="tab-sort-Img">
                    <div class="tab-sort-detail">
                        <div class="tab-sort-title">第六届哈尔滨TAISHO雪地活动第六届哈尔滨TAISHO雪地活动</div>
                        <div class="tab-sort-time">赛事时间：2018.02.24-2018</div>
                        <div class="tab-sort-day"><span>热门活动 </span><span>距活动开始还有3天</span></div>
                        <div class="tab-sort-money">¥88元</div>
                    </div>
                    <div class="tab-sort-bottom">
                        <div class="active"><span>报</span> 已报名参加该活动</div>
                        <!--<div class="cancel"><span>消</span> 已取消参加该活动</div>-->
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <div class="tab-item-sort" v-for="item in 1">
                <div class="tab-item-time">2018-01-02 星期六</div>
                <div class="tab-sort-num" v-for="n in 5">
                    <img src="/index/images/cbd.jpg" alt="" class="tab-sort-Img">
                    <div class="tab-sort-detail">
                        <div class="tab-sort-title">第六届哈尔滨TAISHO雪地活动第六届哈尔滨TAISHO雪地活动</div>
                        <div class="tab-sort-time">赛事时间：2018.02.24-2018</div>
                        <div class="tab-sort-day"><span>热门活动 </span><span>距活动开始还有3天</span></div>
                        <div class="tab-sort-money">¥88元</div>
                    </div>
                    <div class="tab-sort-bottom">
                        <!--<div class="active"><span>报</span> 已报名参加该活动</div>-->
                        <div class="cancel"><span>消</span> 已取消参加该活动</div>
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
    </mt-tab-container>
</div>
{/block}

{block name="script"}
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected:"1",
            baseInfo:'',
            subData:{
                id:'',
                typeid:''
            },
        },
        created(){
            var yu=[],
                hot=[],
                end=[],
                other=[],
                baseInfo=this.baseInfo,
                now=Date.parse(new Date())/1000;
            for(var i=0 ;i<baseInfo.length;i++){
                if(baseInfo[i].start_time < now){
                    end.push(baseInfo[i])
                }else{
                    if(baseInfo[i].status == 2){
                        hot.push(baseInfo[i])
                    }else if(baseInfo[i].status == 1){
                        yu.push(baseInfo[i])
                    }else{
                        other.push(baseInfo[i])
                    }
                }
            }
            console.log(hot,yu,end,other)
            this.baseInfo = hot.concat(yu.concat(end.concat(other)));
        },
        methods: {
            ajaxPost(){
                var _this = this;
                _this.subData.id = 1;
                _this.subData.typeid = 1;
                _this.isSubmit = true;
                _this.$http.post('/index/Activity/pay',_this.subData).then(function (res) {
//                    //10 微信支付接口
//                    // 10.1 发起一个支付请求
//                    // 注意：此 Demo 使用 2.7 版本支付接口实现，建议使用此接口时参考微信支付相关最新文档。
//                    var param = res.data.data;
//                    wx.config({
//                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//                        appId: param.appid, // 必填，公众号的唯一标识
//                        timestamp: param.timestamp, // 必填，生成签名的时间戳
//                        nonceStr: param.nonce_str, // 必填，生成签名的随机串
//                        signature: param.sign,// 必填，调用js签名，
//                        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，这里只写支付的
//                    });
//                    wx.chooseWXPay({
//                        timestamp: param.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
//                        nonceStr: param.nonce_str, // 支付签名随机串，不长于 32 位
//                        package: "prepay_id=" + param.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
//                        signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
//                        paySign: param.sign, // 支付签名
//                        success: function (res) {
//                            if(res.errMsg == "chooseWXPay:ok"){
//                                alert("支付成功");
////                                window.location.href  = "/hims/weixin/pages/Order_ok.html?access_token=" getUrlParam("access_token");
//                            }else{
//                                alert(res.errMsg);
//                            }
//                        },
//                        cancel: function(res){
//                            //alert('取消支付');
//                        }
//                    });
                    var str = res.data.data;
                    function onBridgeReady(){
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId":str.appid,     //公众号名称，由商户传入
                                "timeStamp":"\'"+str.timestamp+"\'",         //时间戳，自1970年以来的秒数
                                "nonceStr":str.nonce_str, //随机串
                                "package":"prepay_id="+str.prepay_id,
                                "signType":"MD5",         //微信签名方式：
                                "paySign":str.sign //微信签名
                            },
                            function(res){
                                if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                            }
                        );
                    }
                    if (typeof WeixinJSBridge == "undefined"){
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    }else{
                        onBridgeReady();
                    }

                })
            },
            state(status ,start,end){
                if(status == 0){
                    return 'cancel'
                }else if(status ==1){
                    return 'un'
                }
                if(start*1000 > Date.parse(new Date())){
                    if(status == 2){
                        return 'hot'
                    }
                }else {
                    if(Date.parse(new Date()) < end*1000){
                        return 'noSignUp'
                    }else{
                        return 'end'
                    }
                }
            },
            jumpToDel(){
                window.location.href = '/index/user/detail'
            }
        }
    })
</script>
{/block}